<template>
      <div>
            <div class="orderBox">
                  <!-- 订单展示 begin -->
                  <div v-for="list in orderList" :key="list.id" class="orderDetails">
                        <div class="orderTitle">
                              <h1 class="orderShop">{{list.shop}}</h1>
                              <span class="orderStatus">{{list.status}}</span>
                        </div>
                        <p class="orderTime">{{list.time}}</p>
                        <div class="orderPicBox">
                              <img v-for="item in list.imgs" :key="item.id" alt="" :src="item.imgsrc" class="orderPic">
                              <div class="orderConfig">
                                    <span class="orderPrice">{{list.price}}</span>
                                    <span class="orderCount">{{list.count}}</span>
                                    <span class="dadaDeliver">{{list.send}}</span>
                              </div>
                        </div>
                        <div class="buyAgin"><a href="#" class="buyAginText">再次购买</a></div>
                  </div>
                  <!-- 订单展示 end -->  
            </div>
            <!-- 已显示全部信息 begin -->
            <div class="showAll">已显示全部</div>
            <!-- 已显示全部信息 end -->
            <!-- 底部导航栏begin -->
            <footer class="navFooterBox">
              <router-link to="/index" class="navFooter footerFirst">首页</router-link>
              <router-link to="/index/list" class="navFooter footerSec">分类</router-link>
              <router-link to="/index/cart" class="navFooter footerThird">购物车</router-link>
              <router-link to="/index/order" class="forthSelect">订单</router-link>
              <router-link to="/index/mine" class="navFooter footerFive">我的</router-link>
            </footer>
            <!-- 底部导航栏end -->
      </div>
</template>
<script>
export default {
      data(){
            return{
                  orderList:[]
            }
      },
      methods:{
            getOrderList(){
                  this.jq.get(this.apiurl+'/order/list').done(result=>{
                        if(result.error==0){
                              this.orderList=result.data
                        }
                  })
            }         
      },
      created(){
            this.getOrderList()
      }
}
</script>
<style scoped>
/*订单展示 begin*/ 
/* 标题部分样式 */
.orderDetails{
      padding:0 10px 15px 10px;
      position: relative;
      margin-bottom: 1rem;
      background: #fff; 
}
.orderTitle{
      height: 40px;
      line-height: 40px;
}
.orderShop{
      color: #333;
      font-size: 15px;
      font-weight: bold;
      float: left;
}

.orderStatus{
      color: #333;
      font-size: 13px;
      float: right;
}
.orderTime{
      color: #999;
      font-size: 13px;
      position: absolute;
      top: 32px;
}
/* 详情部分样式 */
.orderPicBox{
      margin-top:1.9rem;
      overflow: hidden;
}
.orderPic{
      width: 4.5rem;
      margin-left: 0.7rem;
      float: left;
}
.orderConfig{
      float: right;
      text-align: right;
}
.orderPrice{
      display: block;
      font-size: 15px;
      color: #FF5757;
      height: 19px;
}
.orderCount{
      display: block;
      font-size: 13px;
      color: #666;
      padding-bottom: 3px;
}
.dadaDeliver{
      float: right;
      font-size: 10px;
      padding:0 2px;
      border-radius: 2px;
      height: 15px;
      border: 1px solid #16A9ff;
      color: #16a9ff;
}
.buyAgin{
      margin-top: 1.4rem;
      text-align: right;
}
.buyAginText{
      display: inline-block;
      color: #333;
      font-size: 15px;
      border:1px solid #d9d9d9;
      padding: 0.5rem 0.7rem;
      border-radius: 2px;
}
/*订单展示 end*/ 

/*显示全部*/ 
.showAll{
      height: 40px;
      line-height: 40px;
      background: white;
      color: #3c3c3c;
      font-size: 14px;
      text-align: center;
}
/*底部固定导航begin*/ 
      .navFooterBox{
            position: fixed;
            z-index: 801;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: #fff;
            border-top: 1px solid #d9d9d9;
            box-sizing: border-box;
            display: flex;
      }

      .navFooter{
            display:inline-block;
            width:20%;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            color:#555;
            padding-top: 2.4rem;
      }
      .footerFirst{
            background:url('/static/img/footer.png') no-repeat center -250px;
            background-size:2rem auto;
      }

      .footerSec{
            background: url('/static/img/footer.png') no-repeat center -300px;
            background-size:2rem auto;
      }
      .footerThird{
            background: url('/static/img/footer.png') no-repeat center -350px;
            background-size:2rem auto;
      }
      .footerForth{
            background: url('/static/img/footer.png') no-repeat center -400px;
            background-size:2rem auto;
      }
      .footerFive{
            background: url('/static/img/footer.png') no-repeat center -450px;
            background-size:2rem auto;
      }
      .forthSelect{
            display:inline-block;
            width:20%;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            padding-top: 2.4rem;
            background: url('/static/img/footer.png') no-repeat center -150px;
            background-size:2rem auto;
            color: #39ac69;
      }
/*底部固定导航end*/ 
</style>

